<template>
  <div class="box">
    <van-nav-bar
      left-arrow
      @click-left='$router.go(-1)'
      title="订单"
      fixed
    />
    <section>
      <div class="b">
        <van-tabs v-model="activeName" @click="choose" :animated='true' line-height='0' title-active-color='#FF5959'>
          <van-tab title="综合" name="a">
            <OrderList :orderList='orderlist'></OrderList>
          </van-tab>
          <van-tab title="未付款" name="b">
            <OrderList :orderList='newList'></OrderList>
          </van-tab>
          <van-tab title="已付款" name="c">
            <OrderList :orderList='newList'></OrderList>
          </van-tab>
        </van-tabs>
      </div>
    </section>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Tabs, Tab, Sticky } from 'vant'
import OrderList from '@/components/OrderList'
import { getOrder, getProductById, getWelfareProDetailList } from '@/api'
Vue.use(NavBar)
Vue.use(Tabs)
Vue.use(Tab)
Vue.use(Sticky)
export default {
  components: {
    OrderList
  },
  data () {
    return {
      activeName: 'a',
      // 综合的数据
      orderlist: [],
      // 存储过滤后的数据
      newList: []
    }
  },
  mounted () {
    const username = localStorage.getItem('userTel_AM')
    getOrder({ username }).then(res => {
      if (res.data.code === '200') {
        res.data.data.map(item => {
          if (item.proid.substring(0, 2) === '10') {
            getProductById({
              proid: item.proid,
              username: localStorage.getItem('userTel_AM')
            }).then(result => {
              item.pro_introduce = result.data.data[0].pro_introduce
              item.pro_pic = result.data.data[0].pro_pic
              item.clinic_serviceName = result.data.data[0].clinic_serviceName
              item.distance = result.data.data[0].distance
              item.pro_price = result.data.data[0].pro_price
              this.orderlist.push(item)
            })
          } else {
            getWelfareProDetailList({ proid: item.proid }).then(result => {
              item.pro_introduce = result.data.data[0].pro_introduce
              item.pro_pic = result.data.data[0].pro_pic
              item.clinic_serviceName = result.data.data[0].clinic_serviceName
              item.distance = result.data.data[0].distance
              item.pro_price = result.data.data[0].pro_price
              this.orderlist.push(item)
            })
          }
        })
      }
    })
  },
  methods: {
    choose (name) {
      this.newList = this.orderlist
      switch (name) {
        case 'a': // 综合
          break
        case 'b': // 已付款
          this.filter('0')
          break
        case 'c': // 已使用
          this.filter('1')
          break
      }
    },
    /**
     * 过滤状态
     * value: 0(已付款) 1（已使用）
     */
    filter (value) {
      this.newList = this.newList.filter(item => {
        return item.status === value
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  height: 100%;
  overflow: hidden;
}
section{
  flex: 1;
  font-family:PingFang SC;
  overflow: auto;
  margin-top: 0.46rem;
  .b {
    height: 100%;
    overflow: hidden;
  }
  /deep/ .van-tabs{
    height: 100%;
    display: flex;
    flex-direction: column;
    .van-tab{
      font-size: 0.16rem;
      box-shadow:0px 0.43rem 0px rgba(97,97,97,0.3);
    }
    .van-tabs__content {
      flex: 1;
      /* background-color: rgb(239,239,239); */
      .van-tab__pane-wrapper {
        overflow: auto;
      }
    }
  }
}
/deep/ .van-tabs__nav--line {
  border-bottom: 1px solid #d7d7d7;
  box-sizing: border-box;
  line-height: 0.44rem;
  padding-bottom: 0;
}
/deep/ .van-nav-bar {
  z-index: 100;
}
/deep/ .van-icon-arrow-left {
  font-size: 0.22rem;
  color: #171717;
}
/deep/ .van-nav-bar__title {
  font-size: 0.18rem;
  color: #171717;
  font-weight: bold;
}
</style>
